<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:76:"E:\workplace\project\Sunwm\web/../application/admin\view\material\index.html";i:1489547416;}*/ ?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="__ROOT__/static/public/css/pintuer.css" />
	<link rel="stylesheet" type="text/css" href="__ROOT__/static/public/css/style.css" />
	<link rel="stylesheet" type="text/css" href="__ROOT__/static/admin/css/admin.css" />
	<script type="text/javascript" src="__ROOT__/static/public/js/jquery.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/js/jquery.form.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/js/pintuer.js"></script>
	<script type="text/javascript" src="__ROOT__/static/admin/js/admin.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/layer/layer.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/laydate/laydate.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/laytpl/laytpl.js"></script>
	<script type="text/javascript" src="__ROOT__/static/public/laypage/laypage.js"></script>
</head>
<body>
<style>
	.media{
		overflow:visible;
		width:23%;
		text-align:center;
		margin-bottom:20px;
	}
	.media a img{
		max-width:200px;
	}
	audio{
		float: right;
		margin-top: -5px;
	}
	.list-group{
		border:none;
	}
	.list-group li{
		border:none;
	}
	.badge{
		cursor: pointer;
	}
	.other{
		width: auto;
	}
</style>
	<!--主窗体 开始-->
	<div class="container padding-big-top padding-big-bottom" style="width:100%;">
		<div class="tab border-main">
			<div class="tab-head">
				<strong><?php echo lang('currency')['material']; ?><?php echo lang('currency')['manage']; ?></strong>
				<ul class="tab-nav">
					<li data-type="image" class="active"><a href="#tab-start"><?php echo lang('currency')['image']; ?></a> </li>
					<li data-type="audio" ><a href="#tab-css"><?php echo lang('currency')['audio']; ?></a> </li>
					<li data-type="video" ><a href="#tab-units"><?php echo lang('currency')['video']; ?></a> </li>
					<li data-type="other" ><a href="#tab-other"><?php echo lang('currency')['other']; ?></a> </li>
				</ul>
			</div>
			<div class="tab-body">
				<div class="tab-panel active" id="tab-start">
					<div class="form-group">
						<div class="field">
							<div class="button-group border-main radio">
									<label class="allcat button active">
										<input name="image_cat" value="0" checked="checked" type="radio"><span class="icon icon-check"></span> <?php echo lang('currency')['all']; ?>
									</label>
									<?php if(is_array($image_category) || $image_category instanceof \think\Collection || $image_category instanceof \think\Paginator): $i = 0; $__LIST__ = $image_category;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cat): $mod = ($i % 2 );++$i;?>
									<label class="button badge-corner">
										<input name="image_cat" value="<?php echo $cat['id']; ?>" type="radio"><span data-id="<?php echo $cat['id']; ?>" class="delcategory zindex badge bg-red icon icon-times"> </span><span class="icon icon-check"></span> <?php echo $cat['title']; ?>
									</label>
									<?php endforeach; endif; else: echo "" ;endif; ?>
								<button class="button addcat"><?php echo lang('currency')['add']; ?></button>
							</div>
							<a class="button input-file bg-main float-right" href="javascript:void(0);"><?php echo lang('form')['file']; ?><form method="post" enctype="multipart/form-data" ><input accept="image/*" multiple type="file" name="files[]" /></form></a>
						</div>
					</div>
					<hr class="bg-main"/>
					<script id="image_list_tpl" type="text/html">
						{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
							<div class="media clearfix border border-main border-dotted badge-corner {{# if(d.data[i].ext=='png'){ }} bg-black{{# } }}">
								<span data-id="{{ d.data[i].id }}" class="materialdel badge bg-red icon-times"> </span>
								<a class="material" data-url="{{ d.data[i].url }}" href="#">
									<img src="{{ d.data[i].url }}" class="radius" alt="...">
								</a>
							</div>
						{{# } }}
					</script>
					<div class="media-inline" id="image_list"></div>
					<div class="margin-top media-inline text-center" id="page_image"></div>
				</div>
				<div class="tab-panel" id="tab-css">
					<div class="form-group">
						<div class="field">
							<div class="button-group border-main radio">
									<label class="allcat button active">
										<input name="audio_cat" value="0" checked="checked" type="radio"><span class="icon icon-check"></span> <?php echo lang('currency')['all']; ?>
									</label>
									<?php if(is_array($audio_category) || $audio_category instanceof \think\Collection || $audio_category instanceof \think\Paginator): $i = 0; $__LIST__ = $audio_category;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cat): $mod = ($i % 2 );++$i;?>
									<label class="button badge-corner">
										<input name="audio_cat" value="<?php echo $cat['id']; ?>" type="radio"><span data-id="<?php echo $cat['id']; ?>" class="delcategory zindex badge bg-red icon icon-times"> </span><span class="icon icon-check"></span> <?php echo $cat['title']; ?>
									</label>
									<?php endforeach; endif; else: echo "" ;endif; ?>
								<button class="button addcat"><?php echo lang('currency')['add']; ?></button>
							</div>
							<a class="button input-file bg-main float-right" href="javascript:void(0);"><?php echo lang('form')['file']; ?><form method="post" enctype="multipart/form-data" ><input accept="audio/*" multiple type="file" name="files[]" /></form></a>
						</div>
					</div>
					<hr class="bg-main"/>
					<script id="audio_list_tpl" type="text/html">
						{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
							<li>
								<a href="#" class="material"  data-url="{{ d.data[i].url }}">【音频】{{ d.data[i].title }} </a>
								<span data-id="{{ d.data[i].id }}" class="margin-left float-right materialdel badge bg-red icon-times"> </span>
								<audio src="{{ d.data[i].url }}" controls="">
									您的浏览器不支持 audio 标签
								</audio>
							</li><hr class="bg-main">
						{{# } }}
					</script>
					<div class="media-inline"><ul class="list-group" id="audio_list"></ul></div>
					<div class="margin-top media-inline text-center" id="page_audio"></div>
				</div>
				<div class="tab-panel" id="tab-units">
					<div class="form-group">
						<div class="field">
							<div class="button-group border-main radio">
									<label class="allcat button active">
										<input name="video_cat" value="0" checked="checked" type="radio"><span class="icon icon-check"></span> <?php echo lang('currency')['all']; ?>
									</label>
									<?php if(is_array($video_category) || $video_category instanceof \think\Collection || $video_category instanceof \think\Paginator): $i = 0; $__LIST__ = $video_category;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cat): $mod = ($i % 2 );++$i;?>
									<label class="button badge-corner">
										<input name="video_cat" value="<?php echo $cat['id']; ?>" type="radio"><span data-id="<?php echo $cat['id']; ?>" class="delcategory zindex badge bg-red icon icon-times"> </span><span class="icon icon-check"></span> <?php echo $cat['title']; ?>
									</label>
									<?php endforeach; endif; else: echo "" ;endif; ?>
								<button class="button addcat"><?php echo lang('currency')['add']; ?></button>
							</div>
							<a class="button input-file bg-main float-right" href="javascript:void(0);"><?php echo lang('form')['file']; ?><form method="post" enctype="multipart/form-data" ><input accept="video/*" multiple type="file" name="files[]" /></form></a>
						</div>
					</div>
					<hr class="bg-main"/>
					<script id="video_list_tpl" type="text/html">
						{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
							<div class="media clearfix border border-main border-dotted badge-corner {{# if(d.data[i].ext=='png'){ }} bg-black{{# } }}">
								<span data-id="{{ d.data[i].id }}" class="materialdel badge bg-red icon-times"> </span>
								<a class="material" data-url="{{ d.data[i].url }}" href="#">
									<img src="{{ d.data[i].url }}" class="radius" alt="...">
								</a>
							</div>
						{{# } }}
					</script>
					<div class="media-inline" id="video_list"></div>
					<div class="margin-top media-inline text-center" id="page_video"></div>
				</div>
				<div class="tab-panel" id="tab-other">
					<div class="form-group">
						<div class="field">
							<div class="button-group border-main radio">
									<label class="allcat button active">
										<input name="other_cat" value="0" checked="checked" type="radio"><span class="icon icon-check"></span> <?php echo lang('currency')['all']; ?>
									</label>
									<?php if(is_array($other_category) || $other_category instanceof \think\Collection || $other_category instanceof \think\Paginator): $i = 0; $__LIST__ = $other_category;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cat): $mod = ($i % 2 );++$i;?>
									<label class="button badge-corner">
										<input name="other_cat" value="<?php echo $cat['id']; ?>" type="radio"><span data-id="<?php echo $cat['id']; ?>" class="delcategory zindex badge bg-red icon icon-times"> </span><span class="icon icon-check"></span> <?php echo $cat['title']; ?>
									</label>
									<?php endforeach; endif; else: echo "" ;endif; ?>
								<button class="button addcat"><?php echo lang('currency')['add']; ?></button>
							</div>
							<a class="button input-file bg-main float-right" href="javascript:void(0);"><?php echo lang('form')['file']; ?><form method="post" enctype="multipart/form-data" ><input multiple type="file" name="files[]" /></form></a>
						</div>
					</div>
					<hr class="bg-main"/>
					<script id="other_list_tpl" type="text/html">
						{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
							<div class="media other clearfix badge-corner">
								<span data-id="{{ d.data[i].id }}" class="materialdel badge bg-red icon-times"> </span>
								<a class="material" data-url="{{ d.data[i].url }}" href="#">
									<div class="txt txt-big radius bg-main">{{ d.data[i].ext }}</div>
								</a>
								<div class="media-body">{{ d.data[i].title }}</div>
							</div>
						{{# } }}
					</script>
					<div class="media-inline" id="other_list"></div>
					<div class="margin-top media-inline text-center" id="page_other"></div>
				</div>
			</div>
		</div>
	</div>
	<!--主窗体 结束-->
	<script>
		var type = 'image';
		var load_id;
		var num = 0;
		layer.config({
		  extend: 'extend/layer.ext.js'
		}); 
		$('.tab-nav li').click(function(){
			type = $(this).attr('data-type'); 
			pages();
		});
		$('.addcat').click(function(){
			var mythis = $(this)
			layer.prompt({title:'<?php echo lang('currency')['add']; ?><?php echo lang('label')['category']; ?>'},function(val){
				$.getJSON("__ROOT__/admin/material/addcategory?type="+type+"&title="+val,function(data){
					if(data.code == 'success'){
						$(mythis).before('<label class="button badge-corner"><input name="'+type+'_cat" value="'+data.catid+'" type="radio"><span data-id="'+data.catid+'" class="delcategory zindex badge bg-red icon icon-times"> </span><span class="icon icon-check"></span> '+val+'</label>');
						msg(data.msg,1);
						layer.close();
					}
				});
			});
		});
		$(document).on("click",'.material',function(){
			var id = "<?php echo input('get.id'); ?>"
			var url = $(this).attr('data-url');
			var index = parent.layer.getFrameIndex(window.name);
			parent.$('#'+id).val(url);
			if($.isFunction(parent.uploadfunc)){
				parent.uploadfunc(id);
			}
			parent.layer.close(index);
			
		});
		$(document).on("click",'.materialdel',function(){
			load();
			var id = $(this).attr('data-id');
			layer.confirm('此操作不可恢复，是否确认？', {icon: 3, title:'删除素材',cancel:function(){layer.close(load_id)}}, function(index){
				$.getJSON("__ROOT__/admin/material/del_file?id="+id,function(data){
					if(data.code == 'success'){
						$('#material_'+id).remove();
						msg(data.msg,1);
						pages();
						layer.close(load_id);
					}
				});
			});
		});
		$(document).on("click",'.delcategory',function(){
			load();
			var id = $(this).attr('data-id');
			var parent = $(this).parent();
			layer.confirm('删除分类会删除此分类下的所有文件，是否确认？', {icon: 3, title:'删除分类',cancel:function(){layer.close(load_id)}},function(index){
				$.getJSON("__ROOT__/admin/material/delcategory?id="+id,function(data){
					if(data.code == 'success'){
						$(parent).parent().find('.allcat').trigger('click');
						$(parent).remove();
						msg(data.msg,1);
						layer.close();
						pages();
						layer.close(load_id);
					}
				});
			});
		});
		$(document).on('change','.input-file',function(e){
			var cat = $('input[name="'+type+'_cat"]:checked').val();
			load();
			$.ajax({
				url: '__ROOT__/admin/material/upload?type='+type+"&cat="+cat,
				type: 'POST',
				cache: false,
				dataType: 'json',
				data: new FormData($(this).find('form')[0]),
				processData: false,
				contentType: false
			}).done(function(res) {
				if(res.code=='success'){
					msg(res.msg,1);
					pages();
					layer.close(load_id);
				}else{
					msg(res.msg,2);
					layer.close(load_id);
				}
			}).fail(function(res) {});
		});
		//laypage 分页开始
		//以下将以jquery.ajax为例，演示一个异步分页
		function pages(curr){
			load();
			var cat = $('input[name="'+type+'_cat"]:checked').val();
			$.getJSON('__ROOT__/admin/material/ajax_get?type='+type+'&cat='+cat, {
				page: curr || 1 //向服务端传的参数，此处只是演示
			}, function(res){
				var tpl = document.getElementById(type+'_list_tpl').innerHTML; //读取模版
				//方式一：异步渲染（推荐）
				laytpl(tpl).render(res, function(render){
					document.getElementById(type+'_list').innerHTML = render;
				});
				laypage({
					cont: 'page_'+type, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
					pages: res.pages, //通过后台拿到的总页数
					curr: curr || 1, //当前页
					skin: 'molv', 
					jump: function(obj, first){ //触发分页后的回调
						if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
							pages(obj.curr);
						}
					}
				});
				layer.close(load_id);
			});
		};
		//运行
		pages();
		function load(){
			load_id = layer.load(0,{time:0,shade: [0.3, '#393D49']});
		}
		$('.radio').on("click","label",function() {
			num++;
			var e = $(this);
			e.closest('.radio').find("label").removeClass("active");
			e.addClass("active");
			if(num%2==0){
				pages();
			}
		});
	</script>
</body>
</html>